<template>
  <!-- 横向滚动容器 -->
  <div class="table-wrapper">
    <!-- 表头 -->
    <van-row :wrap="false" class="table-header">
      <van-col span="0" class="col-barcode">单据条码</van-col>
      <van-col span="0" class="col-checkno">检验单号</van-col>
      <van-col span="0" class="col-biz">业务类型</van-col>
      <van-col span="0" class="col-code">存货编码</van-col>
      <van-col span="0" class="col-name">存货名称</van-col>
      <van-col span="0" class="col-supplier">供应商名称</van-col>
      <van-col span="0" class="col-batch">批号</van-col>
      <van-col span="0" class="col-checkdate">检验日期</van-col>
      <van-col span="0" class="col-proddate">生产日期</van-col>
      <van-col span="0" class="col-okqty">合格数量</van-col>
      <van-col span="0" class="col-ngqty">不良数量</van-col>
      <van-col span="0" class="col-scan">扫描状态</van-col>
    </van-row>

    <van-radio-group v-model="selectedId">
    <!-- 数据行 -->
    <div class="table-body">
    <van-cell-group>
        <van-row
            v-for="row in tableData"
            :key="row._rowId"
            :wrap="false"
            class="table-row"
            :class="{ unscanned: !row.isScanned }"
            >
            <van-col span="0" class="col-barcode">
              <van-button
                border:false
                plain
                type="primary"
                size="mini"
                class="barcode-btn"
                @click="$emit('barcode-click', row)"
              >
                {{ row['单据条码'] }}
              </van-button>
            </van-col>
            <van-col span="0" class="col-checkno">{{ row['检验单号'] }}</van-col>
            <van-col span="0" class="col-biz">{{ bizFmt(row['业务类型']) }}</van-col>
            <van-col span="0" class="col-code">{{ row['存货编码'] }}</van-col>
            <van-col span="0" class="col-name">{{ row['存货名称'] }}</van-col>
            <van-col span="0" class="col-supplier">{{ row['供应商名称'] }}</van-col>
            <van-col span="0" class="col-batch">{{ row['批号'] }}</van-col>
            <van-col span="0" class="col-checkdate">{{ row['检验日期'] }}</van-col>
            <van-col span="0" class="col-proddate">{{ row['生产日期'] }}</van-col>
            <van-col span="0" class="col-okqty">{{ row['合格数量'] }}</van-col>
            <van-col span="0" class="col-ngqty">{{ row['不良数量'] }}</van-col>
            <van-col span="0" class="col-scan">
              <van-tag :type="row.isScanned ? 'success' : 'primary'">
                {{ row.isScanned ? '已扫描' : '未扫描' }}
              </van-tag>
            </van-col>
      </van-row>
    </van-cell-group>
    </div>
    </van-radio-group>
  </div>
</template>

<script setup>
import { ref,computed, watch ,nextTick} from 'vue'

/* props */
const props = defineProps({
  data: { type: Array, default: () => [] }
})

/* emit */
const emit = defineEmits(['selection-change', 'barcode-click'])

/* 1. 当前选中的行 id（字符串） */
const selectedId = ref('')

/* 2. 行数据 - 使用单据条码作为唯一ID，避免无限递归 */
const tableData = computed(() =>
  props.data.map(r => ({ ...r, _rowId: r['单据条码'] }))
)

/* 3. 当选中行变化时，把完整行对象抛出去 */
watch(selectedId, id => {
  const row = tableData.value.find(r => r._rowId === id)
  emit('selection-change', row ? [row] : [])
})

/* 4. 业务类型字典 */
function bizFmt(val) {
  const map = { ARR: '来料检验', PRO: '生产检验', SUB: '委外检验' }
  return map[val] || val
}

/* 数据一变就重新染色（可选，下面用纯 CSS 实现就不需要了） */
watch(tableData, () => nextTick(() => {
  document.querySelectorAll('.table-row.unscanned')
          .forEach(tr => tr.style.backgroundColor = 'rgba(64, 149, 229, 0.32)')
}), { immediate: true })


</script>

<style scoped>
/* ========= 滚动容器 ========= */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  background: #fff;   /* 兜底 */
  overflow-x: hidden;
}

/* ===== 表头文字水平垂直居中 ===== */
.table-header .van-col {
  display: flex;              /* 让当前单元格变成 flex 容器 */
  align-items: center;        /* 垂直居中 */
  justify-content: center;    /* 水平居中 */
  background: #f5f5f5;
  font-weight: 600;
}

/* 统一：表头 + 数据行 */
.table-header,
.table-row {
  display: flex;
  width: 100vw;          /* 强制占满屏幕 */
  min-width: 100vw;
}

/* 每一列：flex-shrink=0 保证不被压缩 */
.van-col {
  flex: 0 0 auto;        /* 宽度完全由 flex-basis 决定 */
  padding: 6px;          /* 减少内边距 */
  box-sizing: border-box;
  border-right: 1px solid #ebedf0;
  border-bottom: 1px solid #ebedf0;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: break-word;
  line-height: 1.2;      /* 减少行高 */
  font-size: 12px;       /* 设置较小的字体大小 */
}

/* 最后一列去右边框 */
.van-col:last-child { border-right: none; }

/* 表头背景 */
.table-header .van-col {
  background: #f5f5f5;
  font-weight: 600;
  font-size: 11px;       /* 表头字体稍小一些 */
}

/* ========= 表体白色背景 ========= */
/* .table-row .van-col {
  background: #fff;
} */

/* 所有列默认透明 */
.table-row .van-col {
  background: transparent;
}

/* 未扫描行 → 灰底 */
/* .table-row.unscanned {
  background-color: rgb(200, 200, 200);
} */

/* 可选：最后一行去掉多余横线 */
.table-row:last-child .van-col { border-bottom: none; }

/* ========= 具体宽度（按需求随意调） ========= */
/* 具体宽度（总和 = 100vw） */
.col-barcode  { width: 10%; }/*单据条码*/
.col-checkno  { width: 8.5%; }/*检验单号*/
.col-biz      { width: 6%; }/*业务类型*/
.col-code     { width: 7%; }/*存货编码*/
.col-name     { width: 18%; }/*存货名称*/
.col-supplier { width: 15%; }/*供应商名称*/
.col-batch    { width: 9.5%; }/*批号*/
.col-checkdate{ width: 6.5%; }/*检验日期*/
.col-proddate { width: 6.5%; }/*生产日期*/
.col-okqty    { width: 4.5%; }/*合格数量*/
.col-ngqty    { width: 3.5%; }/*不良数量*/
.col-scan     { width: 5%; }/*扫描状态*/

/* 单据条码文字按钮：完全透明、无边框、字号同普通单元格，仅文字变蓝 */
.barcode-btn.van-button--primary {
  background: transparent !important;   /* 背景透明 */
  border: none !important;              /* 去掉边框 */
  padding: 0 !important;                /* 去掉内边距 */
  height: auto !important;              /* 高度自适应 */
  line-height: inherit !important;      /* 行高继承自父级 */
  font-size: 11px !important;           /* 设置较小的字体大小 */
  color: #436c8e !important;            /* 字体颜色 */
    /* 关键：移除 plain 模式下的阴影和焦点轮廓 */
    box-shadow: none !important;
  outline: none !important;
}
/* 去掉点击时的背景色 */
.barcode-btn.van-button--primary:active {
  background: transparent !important;
}

</style>